.simple-steps {
  .simple-step {
    display: flex;
    flex-direction: row;
    min-height: 106px;
    .simple-step--left {
      text-align: center;
      min-width: 76px;
      width: 30%;
    }
    .simple-step__process {
      position: relative;
      margin: 0 20px;
      .simple-step__process__line {
        width: 2px;
        min-height: 106px;
        height: 100%;
        position: absolute;
        left: 14px;
      }
      .simple-step__process__icon {
        position: relative;
        z-index: 1;
        color: #fff;
        display: inline-flex;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        .simple-step__process__icon-inner {
          display: inline-block;
          text-align: center;
          line-height: 1;
        }
      }
    }
    .simple-step--right {
      max-width: 200px;
    }
  }
}

.custom-steps {
  &.el-steps--simple {
    background: $white;
  }
  .el-step__arrow {
    height: 2px;
    width: 48%;
    margin-top: 10px;
    background-color: #c0c4cc;
    &::before, &::after {
      display: none !important;
    }
  }
  .el-step__head.is-wait {
    .el-step__icon {
      background-color: $gray-light2;
      border-color: $gray-light2 !important;
    }
  }
  .el-step__head.is-process, .el-step__head.is-success {
    .el-step__icon {
      background-color: $brand-primary;
      border-color: $brand-primary !important;
      color: $white !important;
    }
  }
  .el-step__title.is-process,  .el-step__title.is-success{
    font-weight: normal;
    color: $brand-primary;
  }
  .is-success +  .el-step__arrow {
    background: $brand-primary !important;
  }
  .el-step__icon {
    padding: 10px;
  }
}
